<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>验证框示例</title>
	<link rel="stylesheet" type="text/css" href="../../dist/css/hisui.css">
    <script type="text/javascript" src="../../dist/js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="../../dist/js/jquery.hisui.min.js"></script>
	<script type="text/javascript" src="../../dist/js/locale/hisui-lang-zh_CN.js"></script>
    <link rel="stylesheet" type="text/css" href="../demo.css">
	<script src="../jquery-tag-demo.js" type="text/javascript"></script>
	<style>
		td{
			padding: 5px 0;
		}
	</style>
	<script type="text/javascript">
		$.fn.datebox.defaults.formatter = function(date){
			var y = date.getFullYear();
			var m = date.getMonth()+1;
			var d = date.getDate();
			return y+"-"+m+'-'+d;
		}
	</script>
</head>
<body>
	<h2>基础验证框</h2>
	<h3>说明:</h3>
    <span>基础验证框（validatebox）用来验证表单，在输入框上加入简单的验证 。</span>
	<h3>如：</h3>
	<div class="demo-exp-code entry-content"> 
		<div class="hisui-panel" title="登记" style="width:500px;padding:10px;" data-options="headerCls:'panel-header-gray',iconCls:'icon-paper',closable:true,collapsible:true,minimizable:true,maximizable:true">
			<table>					
				<tr>
					<td class="r-label">序号</td>
					<td>
						<input id="patno" class="textbox">
					</td>
					<td style="padding-left: 10px;">
						<a id="btn1" href="#" class="hisui-linkbutton">赋值</a><a id="btn" href="#" class="hisui-linkbutton" style="margin-left: 10px;">验证序号</a>
					</td>
				</tr>
				<tr>
					<td class="r-label">患者姓名</td>
					<td>
						<input class="hisui-validatebox textbox" data-options="required:true,validType:'length[3,10]'">
					</td>
				</tr>
				<tr>
					<td class="r-label">邮箱</td>
					<td>
						<input class="hisui-validatebox textbox" data-options="required:true,validType:'email'">
					</td>
				</tr>
				<tr>
					<td class="r-label">URL</td>
					<td>
						<input id="urlVx" class="hisui-validatebox textbox" data-options="required:true,validType:'url'">
					</td>
					<td  style="padding-left: 10px;"> 
						<a id="btn2" href="#" class="hisui-linkbutton">禁用URL</a>
					</td>
				</tr>
				<tr>
					<td class="r-label">身份证</td>
					<td>
						<input class="hisui-validatebox textbox" data-options="required:true,validType:'idcard'">
					</td>
					<td>
						
					</td>
				</tr>
				<tr>
					<td class="r-label">手机号</td>
					<td>
						<input class="hisui-validatebox textbox" data-options="required:true,validType:'mobilephone'">
					</td>
					<td>
						12位手机号时，会自动去除首位的0
					</td>
				</tr>
				<tr>
					<td class="r-label">数字</td>
					<td>
						<input class="hisui-numberbox textbox">
					</td>
				</tr>
				<tr>
					<td class="r-label">数字</td>
					<td>
						<input class="hisui-numberspinner textbox">
					</td>
				</tr>
				<tr>
					<td class="r-label">生日</td>
					<td>
						<input class="hisui-datebox textbox">
					</td>
				</tr>
				<tr>
					<td class="r-label">备注</td>
					<td>
						<textarea id="notett" class="textbox hisui-validatebox" placeholder="必填项" data-options="required:true" size=12 rows="2" style="height:45px;"></textarea>
					</td>
				</tr>
				<tr>
					<td class="r-label">激活</td>
					<td>
						<input class="hisui-checkbox textbox" type="checkbox">
					</td>
				</tr>
			</table>
		</div>
		<script type="text/javascript">
			var init = function () {
				var valbox = $HUI.validatebox("#patno", {
					required: true,
					placeholder:"序号必填"
				});
				$("#btn1").click(function(){
					$("#patno").val("12345678").validatebox("validate");
				});
				$("#btn").click(function () {
					//$("#patno").data("validatebox").validating=true;
					//$("#patno").validatebox("validate");
					// valbox.jdata <=> $("#patno").data("validatebox")
					//下面二句 可以让tooltip主动显示出来
					valbox.jdata.validating = true;
					valbox.validate();
					// 获得验证结果
					var patnoHasValue = valbox.isValid();
					if (patnoHasValue) {
						alert("序号验证通过");
					} else {
						alert("序号为空");
					}
				});
				$("#btn2").click(function(){
					var box = $("#urlVx");
					var value = box.prop("disabled");
					if(value == false){
						box.validatebox("setDisabled",true);
						$("#btn2 > span > span").text("启用URL");
						box.validatebox("validate");
					}
					else{
						box.validatebox("setDisabled",false);
						$("#btn2 > span > span").text("禁用URL");
						box.validatebox("validate");
					}
				});
	
			}
			$(init);
		</script>
		<pre class="prettyprint hide lang-html"><code>&lt;style>
td{
	padding: 5px 0;
}
&lt;/style>
&lt;div class="hisui-panel" title="登记" style="width:500px;padding:10px;" data-options="headerCls:'panel-header-gray',iconCls:'icon-paper',closable:true,collapsible:true,minimizable:true,maximizable:true"&gt;
	&lt;table&gt;					
		&lt;tr&gt;
			&lt;td class="r-label"&gt;序号&lt;/td&gt;
			&lt;td&gt;
				&lt;input id="patno" class="textbox"&gt;
			&lt;/td&gt;
			&lt;td style="padding-left: 10px;"&gt;
				&lt;a id="btn1" href="#" class="hisui-linkbutton"&gt;赋值&lt;/a&gt;&lt;a id="btn" href="#" class="hisui-linkbutton" style="margin-left: 10px;"&gt;验证序号&lt;/a&gt;
			&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td class="r-label"&gt;患者姓名&lt;/td&gt;
			&lt;td&gt;
				&lt;input class="hisui-validatebox textbox" data-options="required:true,validType:'length[3,10]'"&gt;
			&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td class="r-label"&gt;邮箱&lt;/td&gt;
			&lt;td&gt;
				&lt;input class="hisui-validatebox textbox" data-options="required:true,validType:'email'"&gt;
			&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td class="r-label"&gt;URL&lt;/td&gt;
			&lt;td&gt;
				&lt;input id="urlVx" class="hisui-validatebox textbox" data-options="required:true,validType:'url'"&gt;
			&lt;/td&gt;
			&lt;td  style="padding-left: 10px;"&gt; 
				&lt;a id="btn2" href="#" class="hisui-linkbutton"&gt;禁用URL&lt;/a&gt;
			&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td class="r-label"&gt;身份证&lt;/td&gt;
			&lt;td&gt;
				&lt;input class="hisui-validatebox textbox" data-options="required:true,validType:'idcard'"&gt;
			&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td class="r-label"&gt;手机号&lt;/td&gt;
			&lt;td&gt;
				&lt;input class="hisui-validatebox textbox" data-options="required:true,validType:'mobilephone'"&gt;
			&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td class="r-label"&gt;数字&lt;/td&gt;
			&lt;td&gt;
				&lt;input class="hisui-numberbox textbox"&gt;
			&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td class="r-label"&gt;数字&lt;/td&gt;
			&lt;td&gt;
				&lt;input class="hisui-numberspinner textbox"&gt;
			&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td class="r-label"&gt;生日&lt;/td&gt;
			&lt;td&gt;
				&lt;input class="hisui-datebox textbox"&gt;
			&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td class="r-label"&gt;备注&lt;/td&gt;
			&lt;td&gt;
				&lt;textarea class="textbox hisui-validatebox" data-options="required:true" size=12 rows="2" style="height:45px;"&gt;&lt;/textarea&gt;
			&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td class="r-label"&gt;激活&lt;/td&gt;
			&lt;td&gt;
				&lt;input class="hisui-checkbox textbox" type="checkbox"&gt;
			&lt;/td&gt;
		&lt;/tr&gt;
	&lt;/table&gt;
&lt;/div&gt;</code></pre>
		<pre class="prettyprint hide lang-js"><code>var init = function () {
	var valbox = $HUI.validatebox("#patno", {
		required: true,
		placeholder:"序号必填"
	});
	$("#btn1").click(function(){
		$("#patno").val("12345678").validatebox("validate");
	});
	$("#btn").click(function () {
		//$("#patno").data("validatebox").validating=true;
		//$("#patno").validatebox("validate");
		// valbox.jdata <=> $("#patno").data("validatebox")
		//下面二句 可以让tooltip主动显示出来
		valbox.jdata.validating = true;
		valbox.validate();
		// 获得验证结果
		var patnoHasValue = valbox.isValid();
		if (patnoHasValue) {
			alert("序号验证通过");
		} else {
			alert("序号为空");
		}
	});
	$("#btn2").click(function(){
		var box = $("#urlVx");
		var value = box.prop("disabled");
		if(value == false){
			box.validatebox("setDisabled",true);
			$("#btn2 > span > span").text("启用URL");
			box.validatebox("validate");
		}
		else{
			box.validatebox("setDisabled",false);
			$("#btn2 > span > span").text("禁用URL");
			box.validatebox("validate");
		}
	});

}
$(init);</code></pre>
	</div>
			

	    <table class="table">
			<tr class="protitle">
				<th>属性</th>
				<th>说明</th>
				<th>默认值</th>
				<th></th>
			</tr>
			<tr>
				<td>placeholder</td>
				<td>默认值""</td>
				<td>当不为空时，在输入框显示placeholder,<code>IE9+</code>,<code>chrome</code>支持<code>。2018-10-18</code></td>
				<td></td>
			</tr>
			<tr>
				<td>disabled</td>
				<td>默认值"false"</td>
				<td>当为true时，输入框被禁止使用。<code>2019-9-2</code></td>
				<td></td>
			</tr>
			<tr>
				<td>validType</td>
				<td>格式校验</td>
				<td>新增加身份证号校验'idcare',手机号检验'mobilephone'。<code>2020-01-19</code></td>
				<td></td>
			</tr>
            <tr class="mthtitle">
                <th>方法名</th>
                <th>说明</th>
                <th>入参</th>
                <th>返回值</th>
            </tr>
            <tr>
                <td>setDisabled</td>
                <td>改变disabled属性的值</td>
                <td>false/true</td>
                <td>jquery对象</td>
            </tr>
		</table>
	<prettyprint/>	
</body>
</html>